前端工程化篇之 Gulp

• gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。

  • 我们使用gulp需要用到的包
  • 一个TASK任务，对应一个包，对应一个处理逻辑、
  • gulp.series对应的是同步任务，从左到右，依次执行任务。时间长
  • gulp.parallel对应的是异步任务，效率高，时间短。
  • gulp.src 表明文件从哪里读取
  • gulp.dest 表明文件输出到哪

const gulp = require('gulp');   //gulp的包 
const eslint = require('gulp-eslint'); //eslint的包  语法检查 
const babel = require('gulp-babel');      //编译ES语法的babel包 
const browserify = require('gulp-browserify');  //编译commonJs语法的工具
const rename = require("gulp-rename");    //重命名文件的包
const less = require('gulp-less');   // 识别less文件的gulp的包
const livereload = require('gulp-livereload');   //监控文件的包
const connect = require('gulp-connect');    // 热更新的包
const open = require("open");   //打开网页的包
const uglify = require('gulp-uglify');   //压缩JS代码的包
const LessAutoprefix = require('less-plugin-autoprefix'); //将LESS文件混合的插件包
// https://github.com/browserslist/browserslist   
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });  //拓展CSS识别的包
const cssmin = require('gulp-cssmin');  //压缩CSS的包
const concat = require('gulp-concat');   //合并文件的包 
const htmlmin = require('gulp-htmlmin');  //压缩HTML的包 


// 注册任务
/*
  开发套路：
    1. 去https://gulpjs.com/plugins/搜相关的插件  gulp-xxx
    2. 打开插件的npm仓库 看文档使用
    3. 下载并引入gulp插件
    4. 配置插件任务
 */

// 语法检查  必须有一个eslint的配置文件
gulp.task('eslint', function () {
  // 读取所有的js文件， 返回值就是一个可读流
  return gulp.src(['src/js/*.js'])
    // 对流中的文件/数据进行语法检查
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(livereload());
})

// 语法转换
// babel能将es6模块化语法转换为commonjs模块化语法
// 能将es6及其以上的语法转换为es5及其以下的语法
gulp.task('babel', () =>
  // 读取所有js文件
  gulp.src('src/js/*.js')
    // 进行语法转换
    .pipe(babel({
      presets: ['@babel/preset-env'] //此处需要修改，官网有误
    }))
    // 输出出去
    .pipe(gulp.dest('build/js'))
    .pipe(livereload())
);

// 将commonjs的模块化语法转换成浏览器能识别语法
gulp.task('browserify', function() {
  // 只要放入口文件
  return gulp.src('build/js/app.js')
    .pipe(browserify())
    // 重命名文件
    .pipe(rename("built.js"))
    .pipe(gulp.dest('build/js'))
    .pipe(livereload());
});

// 压缩js代码
gulp.task('uglify', function () {
  return gulp.src('./build/js/built.js')
    .pipe(uglify())
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('dist/js'))
})

// 将less编译成css
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css'))
    .pipe(livereload());
});

// 压缩css
gulp.task('css', function () {
  return gulp.src('./src/less/*.less')
    .pipe(concat('dist.min.css'))
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
});

// 压缩html
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true, // 去除空格
      removeComments: true // 去掉注释
    }))
    .pipe(gulp.dest('dist'));
});

// 自动化 --> 自动编译  --> 自动刷新浏览器（热更新） --> 自动打开浏览器
gulp.task('watch', function() {
  livereload.listen();
  // 开启服务器
  connect.server({
    name: 'Dev App',
    root: ['build'],
    port: 3000,
    livereload: true  //热更新
  });
  // 打开浏览器
  open('http://localhost:3000');
  
  // 监视指定文件，一旦文件发生变化，就执行后面的任务
  gulp.watch('src/less/*.less', gulp.series('less'));
  gulp.watch('src/js/*.js', gulp.series('js-dev'));
});

// 配置默认任务 --> 执行以上多个任务
gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); // 同步顺序执行，同一时间只能执行一个任务  速度慢
gulp.task('js-prod', gulp.series('js-dev', 'uglify'));
// gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); // 异步执行，同一时间执行多个任务   速度快
gulp.task('build', gulp.parallel('js-dev', 'less'));
// 生产环境的指令: gulp prod
gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
// 开发环境的指令： gulp start
gulp.task('start', gulp.series('build', 'watch'));

上面包括了基本上所有gulp工程化所需要的包的使用方法和注释，喜欢的朋友希望你收藏！